import './tab.scss'
import {h,ref,provide,toRef,computed} from 'vue'
import Evt from 'ph-evt'
import {PhFlex} from '../base'
import PhTabPanelContainer from './panel-container.vue'
import PhTabPanel from './tab-panel.vue'
import PhTabNav from './tab-nav.vue'
import {INav} from './struct'
import {uuid} from '../../shared/util'
export default{
    name:"Tab",
    components: {PhTabNav,PhFlex},
    props:{
        type:{
            type:String //card|none->default
        },
        current:{
            type:Number,
            default:0
        },
        // closable:{
        //     type:Boolean,
        //     default:true
        // }
    },
    setup(props:any,ctx:any){
        const newSlots = ctx.slots.default().filter((st:any,i:number)=>{
            st.props.id = i
            st.key="key_"+i
            return st.type.name==="TabPanel"
        })
        const navs = ref<INav[]>(newSlots.map((slot: any)=>slot.props as INav))
        const current = ref(props.current)
        // console.log(current.value)
        // const currentPanel = computed(()=>{
        //     return newSlots.filter(slot=>slot.props.id==current.value)
        // })
        // .map(st=>{
        //     return {
        //         props:st.props,
        //         children:st.children
        //     }
        // }))

        
        
        provide('current',current)
        const onShift = (nid:number)=>{
            current.value = nid
        }
        // const onClose = (nid:number)=>{
        //     const idx = navs.value.findIndex(nav=>nav.id===nid)
        //     navs.value = navs.value.filter(nav=>nav.id!==nid)
        //     newSlots = newSlots.filter(slot=>slot.props.id!==nid)
        // }
        return ()=>{
            return h(PhFlex,{
                    class:['ph-tabs'],
                    dir:"col"
                },()=>{
                    return [
                        h(PhTabNav,{
                            type:props.type,
                            current:current.value,
                            navs:navs.value,
                            // closable:props.closable,
                            onShift,
                            // onClose
                        }),
                        h("div",{
                            class:"ph-panels"
                        },newSlots)
                    ]
                })
        }
    }
}
